import React from 'react';
import Link from 'next/link';
import LazyLoad from 'react-lazyload';
import { array } from 'prop-types';
import { utilEncoding } from '../../../tools/utils';
import store from '../../../store';
import './index.css';

const SingleItem = ({ item }) => {
  let coupon_price = item.zk_final_price && item.coupon_amount ? (parseFloat(item.zk_final_price) -parseFloat(item.coupon_amount)).toFixed(2) : parseFloat(item.zk_final_price).toFixed(2);
  return (
    <div className="goods-block" key={item.item_id}>
      <Link href={{pathname: '/details', query: {goodsItem: queryDetails(item)}}}>
        <a>
          {
            item.user_type === "1" && <img className='tianmao-img' src='../../../static/images/tianmao.png' />
          }
          <div className="goods-block__img">
            {/* <LazyLoad> */}
              <img src={item.pict_url ? item.pict_url : '../../../static/images/moren.png'} />
            {/* </LazyLoad> */}
          </div>
          <section>
            <h2 className="goods-block__title" dangerouslySetInnerHTML={{ __html: item.title }}></h2>
            <div className="goods-block__price">
              <div>
                <span className="goods-block__original-price">¥{ item.zk_final_price }</span>
                <span className="now-price">¥{ coupon_price }</span>
              </div>
              <div>
                <span>月销量{ item.volume }</span>
              </div>
            </div>
          </section>
        </a>
      </Link>
    </div>
  )
}

function queryDetails(item) {
  let detailsItem = {
    item_id: item.item_id,
    zk_final_price: item.zk_final_price,
    coupon_amount: item.coupon_amount,
    small_images: item.small_images,
    pict_url: item.pict_url,
    user_type: item.user_type,
    title: item.title,
    volume: item.volume,
    coupon_start_time: item.coupon_start_time,
    coupon_end_time: item.coupon_end_time,
    shopLogo: item.shopLogo,
    shop_title: item.shop_title
  }
  return utilEncoding(detailsItem)
}


SingleItem.prototype = {
  item: array
}

export default SingleItem

